<template>
  <my-layout ref="my-layout" :tabbar-is-show="false">
    <template #TopBackground>
      <my-top-background />
    </template>
    <template #Navbar>
      <view
        style="width: 100%; height: 100%; display: flex; align-items: center"
      >
        <image
          @click="goback()"
          :src="indexTabBarUrl.navigateBack"
          style="width: 30rpx; height: 30rpx; margin-left: 40rpx"
        />
      </view>
    </template>
    <template #Body>
      <!--购票信息-->
      <view class="ticketing_info">
        <image
          class="ticket_fm"
          mode="aspectFill"
          :src="tickeingArr.pictures[0]"
        ></image>
        <view class="tck_name">
          <text class="tck_title">{{ tickeingArr.name }}</text>
          <view class="tck_font">
            <image
              src="http://llg.qiniu.comeinvip.com/images/adress_ico.png"
            ></image>
            <text style="color: #666; font-size: 28rpx; line-height: 40rpx">{{
              tickeingArr.show_address
            }}</text>
          </view>
        </view>
        <!--场次-->
        <view class="tck_session">
          <text class="session_name">选择场次</text>
          <view
            style="
              display: flex;
              flex-direction: column;
              margin-top: 24rpx;
              row-gap: 24rpx;
            "
          >
            <view
              v-for="(sitem, skey) in setionArr"
              :key="skey"
              style="
                width: 372rpx;
                height: 88rpx;
                border-radius: 10rpx;
                border: 2rpx solid #d8d8d8;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 28rpx;
                line-height: 40rpx;
              "
              :class="[tabsetionIndex == skey ? 'scene-selected' : '']"
            >
              <text @click="tab_s_tab(sitem.id)">{{ sitem.show_time }}</text>
            </view>
          </view>
        </view>
        <!--场面-->
        <view class="parvalue_con">
          <text class="session_name">选择票面</text>
          <text class="parvalue_subtit">根据所选票面随机分配座位</text>
          <view class="parvalue">
            <text
              v-for="(ritem, rkey) in rmbArr"
              :key="rkey"
              @click="priceHover(ritem)"
              :class="[currentPrice.id == ritem.id ? 'parvalue_hover' : '']"
              >{{ ritem.name }}票 {{ ritem.price }}元</text
            >
          </view>
          <!-- <view v-if="tabsetionIndex==1" class="parvalue">
              <text @click="priceHover(1)" :class="[currentPrice==1?'parvalue_hover':'']">精品包房票 360元</text>
            </view> -->
        </view>
      </view>
      <!--购买-->
      <view v-if="currentPrice" class="purchase">
        <view class="purchase_fun" v-if="1 == 2">
          <text class="purchase_name">购买数量</text>
          <view class="purchase_fun_count">
            <image
              src="http://llg.qiniu.comeinvip.com/images/count02.png"
            ></image>
            <text>1</text>
            <image
              src="http://llg.qiniu.comeinvip.com/images/count01.png"
            ></image>
          </view>
        </view>
        <view
          style="
            padding: 36rpx;
            display: flex;
            justify-content: space-between;
            align-items: center;
          "
        >
          <view style="font-weight: bold">购买数量</view>
          <view style="display: flex; align-items: center; column-gap: 40rpx">
            <image
              @click="sub"
              style="width: 60rpx; height: 60rpx"
              src="http://llg.qiniu.comeinvip.com/images/count02.png"
            ></image>
            <view>{{ count }}</view>
            <image
              @click="add"
              style="width: 60rpx; height: 60rpx"
              src="http://llg.qiniu.comeinvip.com/images/count01.png"
            ></image>
          </view>
        </view>
        <view
          style="
            border-top: 2rpx solid #e8e8e8;
            margin-left: 36rpx;
            margin-right: 36rpx;
          "
        ></view>
        <view class="purchase_buy">
          <view class="purchase_rmb"
            ><text class="rmb_amountto">合计</text
            ><text class="prmb"
              >¥{{ currentPrice.price * count }}.00</text
            ></view
          >
          <text
            style="font-weight: bold"
            class="purchase_btn"
            @click="buyticketing(tickeingArr)"
            >确认购买</text
          >
        </view>
      </view>
    </template>
  </my-layout>
</template>

<script>
import anilSeat from "@/uni_modules/anil-seat/components/anil-seat/anil-seat.vue";
import configApi from "@/utils/config.js";
import indexTabBarUrl from "@/url/index_tabBar";
export default {
  components: {
    anilSeat,
  },
  data() {
    return {
      indexTabBarUrl,
      navbarData: {
        // 头部组件所需参数
        showCapsule: 0, //是否显示左上角返回图标   1表示白色显示    0表示不显示 2黑色
        positionShow: 1, //0不显示定位 1 显示定位
        backgroundCor: 1, //0 无背影色 1首页背景颜色   2白色
        statusBarHeight: uni.getSystemInfoSync()["statusBarHeight"],
        navHeight: 45,
      },
      ticketpop: false,
      prices: 360,
      currentPrice: null,
      showids: null,
      tickeingArr: {}, //详情内容
      tabsetionIndex: 0,
      setionArr: [], //场次
      rmbArr: [], //价格
      count: 0,
    };
  },
  async onLoad(options) {
    // 获取手机系统信息
    const info = uni.getSystemInfoSync();
    const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
    this.navbarData.navHeight =
      menuButtonInfo.bottom -
      info.statusBarHeight +
      (menuButtonInfo.top - info.statusBarHeight);
    if (options.id) {
      this.showids = options.id;
    }
    try {
      this.$refs["my-layout"].openLoading();
      //演出详情
      let con = {
        show_id: this.showids,
      };
      let performDetails = await configApi.getPerformDetails(con);
      performDetails.pictures = JSON.parse(performDetails.pictures).map(
        (item) => item.url
      );
      this.tickeingArr = performDetails;
      this.setionArr = await configApi.getPerformNum(con);
      let newshow = {
        scene_id: this.setionArr[0].id,
      };
      this.rmbArr = await configApi.getPerformPrice(newshow);
      this.$refs["my-layout"].closeLoading();
    } catch (error) {
      this.$refs["my-layout"].closeLoading();
      wx.showToast({
        title: "网络异常",
        icon: "error",
        mask: true,
      });
    }
  },
  methods: {
    add() {
      this.count++;
    },
    sub() {
      if (this.count === 0) {
        return;
      }
      this.count--;
    },
    //返回上一页
    goback() {
      uni.navigateBack();
    },
    buyticketing(item) {
      // this.ticketpop = false
      let newitem = JSON.stringify(item);
      uni.navigateTo({
        url: "/pages/content/demoticek/demoticek?con=" + newitem,
      });
    },
    //切换价格
    priceHover(e) {
      this.currentPrice = e;
    },
    //切换场次
    async tab_s_tab(id) {
      this.currentPrice = null;
      this.count = 0;
      this.tabsetionIndex = this._.findIndex(this.setionArr, ["id", id]);
      //演出价格
      let showid = {
        scene_id: id,
      };
      try {
        this.$refs["my-layout"].openLoading();
        this.rmbArr = await configApi.getPerformPrice(showid);
        this.$refs["my-layout"].closeLoading();
      } catch (error) {
        this.$refs["my-layout"].closeLoading();
        wx.showToast({
          title: "网络异常",
          icon: "error",
          mask: true,
        });
      }
    },
  },
};
</script>

<style>
@import url("@/static/css/contents.css");
.ticketing_all .editbackground {
  background: transparent;
}
.scene-selected {
  border-color: #fbd632 !important;
  color: #fbd632;
}
</style>
